<template>
    <div>
        <Search />
        <chart-scatter ref="chartScatter" title="网络时延" :seriesData='chartList' />
        <el-card class="box-card">
            <span>汇总数据</span>
            <e-table :tableConfig="tableConfig" :tableData="tableData" />
        </el-card>
        <div class="scatterDialog dialog-header">
            <el-dialog title="云端大脑服务监测" width="1120px" v-model="scatterPlotDialog">
                <el-row justify="space-between">
                    <el-col :span="6">
                        监测地址：157.158.0.81
                    </el-col>
                    <el-col :span="6" class="textEnd">
                        2018-10-01 23:59:59
                    </el-col>
                </el-row>
                <div class="flexBox">
                    <div class="flexDiv">
                        <div class="flexDiv1">
                            <div class="textDiv"><span>34</span>ms</div>
                            <p>网络时延</p>
                        </div>
                        <div class="flexDiv2">
                            <svg-icon name="icon-scatter-delay" svgClass="scatter-svg" />
                        </div>
                    </div>
                    <div class="flexDiv">
                        <div class="flexDiv1">
                            <div class="textDiv"><span>0</span>%</div>
                            <p>丢包率</p>
                        </div>
                        <div class="flexDiv2">
                            <svg-icon name="icon-scatter-loss" svgClass="scatter-svg" />
                        </div>
                    </div>
                    <div class="flexDiv">
                        <div class="flexDiv1">
                            <div class="textDiv"><span>1.65</span>ms</div>
                            <p>抖动时延</p>
                        </div>
                        <div class="flexDiv2">
                            <svg-icon name="icon-scatter-shake" svgClass="scatter-svg" />
                        </div>
                    </div>
                </div>
                <div class="tableDiv">
                    <div>
                        <span>设备编号：100567</span>
                        <span>上网方式：5G</span>
                        <span>操作系统：Android10</span>
                    </div>
                    <div>
                        <span>运营商：广东联通</span>
                        <span>监测点IP：110.31.23.13</span>
                        <span>目标主机IP：110.31.23.13</span>
                    </div>
                    <div>
                        <span>RSRP：-85</span>
                        <span>RSSI：-80</span>
                        <span>RSRQ：-10</span>
                        <span>SINR：12</span>
                    </div>
                </div>
                <div class="headerDiv">TraceRouter (路由跟踪) 信息</div>
                <e-table :tableConfig="tableConfig1" :tableData="tableData1" />
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, onUnmounted } from 'vue';
import ChartScatter from 'comps/chart/scatter/index.vue';
import Search from 'comps/search/index.vue';
import SvgIcon from 'svgIcon/SvgIcon.vue';
import ETable from 'comps/eTable/index.vue';
import bus from 'utils/mitt';
export default defineComponent({
    name: 'scatter',
    components: { Search, ChartScatter, SvgIcon, ETable },
    setup() {
        let scatterPlotDialog = ref(false);
        const tableConfig = reactive(
            //表格配置
            {
                thead: [
                    { lable: '上报时间', prop: 'date', width: '139' },
                    {
                        lable: '设置编号',
                        prop: 'name',
                        width: '80',
                        type: 'href',
                        method: (index: any, row: any) => {
                            onclickDialog(row);
                            // console.log(row);
                            console.log(33);
                        }
                    },
                    { lable: '监测点运营商', prop: 'address' },
                    { lable: '网络类型', prop: 'hts' },
                    { lable: '设备MAC', prop: 'mac' },
                    { lable: '监测点IP', prop: 'ip' },
                    { lable: '目标主机IP', prop: 'aip' },
                    { lable: '网络时延(ms)', prop: 'ys' },
                    { lable: '丢包(ms)', prop: 'db' },
                    { lable: '抖动(ms)', prop: 'dd' }
                ]
            }
        );
        const tableData = reactive([
            {
                date: '2016-05-02 10:55:01',
                name: '1005671',
                address: '联通',
                hts: '5G',
                mac: '50-EB-71-B1-5F-C1',
                ip: '58.253.41.30',
                aip: '157.18.0.181',
                ys: '35',
                db: '0',
                dd: '5'
            },
            {
                date: '2016-05-02 10:55:01',
                name: '1005671',
                address: '联通',
                hts: '5G',
                mac: '50-EB-71-B1-5F-C1',
                ip: '58.253.41.30',
                aip: '157.18.0.181',
                ys: '35',
                db: '0',
                dd: '5'
            }
        ]);
        const onclickDialog = (v: any) => {
            scatterPlotDialog.value = true;
            console.log(v);
        };
        const chartList = reactive([
            //正常数据
            {
                name: '正常',
                color: '#1CD689',
                data: [
                    ['2021-09-01 09:41:42', '22.8'],
                    ['2021-09-01 09:46:17', '0'],
                    ['2021-09-01 09:47:09', '5'],
                    ['2021-09-01 09:47:51', '10'],
                    ['2021-09-01 09:49:07', '16.8'],
                    ['2021-09-01 09:52:00', '20.8'],
                    ['2021-09-01 09:52:37', '30.8'],
                    ['2021-09-01 09:54:21', '55.8'],
                    ['2021-09-01 09:54:37', '41.8'],
                    ['2021-09-01 10:16:39', '3.8'],
                    ['2021-09-01 10:26:39', '25.8'],
                    ['2021-09-01 10:36:39', '15.8'],
                    ['2021-09-01 10:50:39', '8.8'],
                    ['2021-09-01 11:11:39', '13.8'],
                    ['2021-09-01 11:15:39', '22.8'],
                    ['2021-09-01 11:25:39', '40.8'],
                    ['2021-09-01 11:40:39', '50.8'],
                    ['2021-09-01 11:42:39', '50.8']
                ]
            },
            //非正常数据
            {
                name: '错误',
                color: '#FF5252',
                data: [
                    ['2021-09-01 09:41:42', '1.8'],
                    ['2021-09-01 09:46:17', '2'],
                    ['2021-09-01 09:47:09', '3'],
                    ['2021-09-01 09:47:51', '15'],
                    ['2021-09-01 09:49:07', '10.8'],
                    ['2021-09-01 09:52:00', '50.8'],
                    ['2021-09-01 09:52:37', '35.8'],
                    ['2021-09-01 09:54:21', '40.8'],
                    ['2021-09-01 09:54:37', '41.8'],
                    ['2021-09-01 11:40:39', '49.8'],
                    ['2021-09-01 11:42:39', '51.8']
                ]
            }
        ]);
        const tableConfig1 = reactive({
            thead: [
                { lable: '跳跃数', prop: 'num' },
                { lable: '路由节点ip', prop: 'ip' },
                { lable: '路由节点名称', prop: 'name' },
                { lable: '网络时延(ms)', prop: 'ys' },
                { lable: '丢包(ms)', prop: 'db' },
                { lable: '抖动(ms)', prop: 'dd' }
            ]
        });
        const tableData1 = reactive([
            {
                num: '1',
                ip: '192.168.0.1',
                name: '局域网',
                ys: '35',
                db: '0',
                dd: '5'
            },
            {
                num: '2',
                ip: '192.168.0.1',
                name: '局域网',
                ys: '35',
                db: '0',
                dd: '5'
            },
            {
                num: '3',
                ip: '192.168.0.1',
                name: '佛山市联通',
                ys: '35',
                db: '0',
                dd: '5'
            },
            {
                num: '4',
                ip: '192.168.0.1',
                name: '广东市联通',
                ys: '35',
                db: '0',
                dd: '5'
            }
        ]);

        // 导出图片
        const chartScatter = ref(null);

        const saveImg = () => {
            chartScatter.value.saveImage('网络时延');
        };
        // 方法
        onMounted(() => {
            bus.on('dropdownImg', (e: any) => {
                saveImg();
            });
        });
        // 销毁
        onUnmounted(() => {
            bus.off('dropdownImg');
        });
        return {
            chartList,
            tableData,
            tableConfig,
            scatterPlotDialog,
            tableConfig1,
            tableData1,
            onclickDialog,
            chartScatter,
            saveImg
        };
    }
});
</script>

<style  lang="scss">
.scatterDialog {
    .color303133 {
        color: #303133;
    }

    .textEnd {
        text-align: end !important;
    }

    .felxd {
        height: 100px;
        width: 170px;
        float: left;
        display: flex;
        justify-content: center;
    }

    .flexBox {
        margin: 20px 0 0 0;
        display: flex !important;
        .flexDiv {
            border-radius: 2px;
            width: 340px;
            height: 100px;
            background-color: #f5f7fa !important;
        }
        .flexDiv:not(:last-child) {
            margin-right: 30px;
        }
        .flexDiv1 {
            @extend .felxd;
            flex-direction: column;
            .textDiv {
                @extend .color303133;
                span {
                    font-size: 26px;
                    margin-left: 50px;
                }
            }
            p {
                margin-left: 50px;
            }
        }
        .flexDiv2 {
            @extend .felxd;
            align-items: center;
        }
    }
    .tableDiv {
        div {
            border-bottom: 1px solid #ebeef5;
            height: 40px;
            line-height: 40px;
            span {
                width: 270px;
                display: inline-block;
            }
        }
        div:nth-of-type(1) {
            margin-top: 10px;
        }
    }
    .headerDiv {
        margin-top: 30px;
        font-weight: bold;
    }
}
</style>